<template>
  <!-- <h1>{{ msg }}</h1> -->
  <!-- <slotCom></slotCom> -->
  <!-- <showModalCom></showModalCom> -->
  <!-- <mixinsCom></mixinsCom>
  <dynamic></dynamic> -->
  <!-- <button @click="com = 'dynamic'">tab选项卡</button>
  <button @click="com = 'mixinsCom'">混入组件</button>
  <keep-alive exclude="mixinsCom">
    <component :is="com"></component>
  </keep-alive> -->
  <!-- <commonApi></commonApi> -->
  <!-- <transitionCom></transitionCom> -->
    <marked></marked>
</template>

<script>
//引入组件  
import slotCom from "./components/01组件插槽.vue"
import showModalCom from "./components/03.展示modal组件.vue"
import mixinsCom from "./components/04mixins"
import dynamic from "./components/05.动态组件/基本语法.vue"
import commonApi from "./components/06常用api"
import transitionCom from "./components/07过渡动画"
import marked from "./components/08marked"
//固定语法,这里就是组件的选项

//provide(提供) inject(注入)

//provide传递的数据如果是基本数据类型,如果数据变更,后续不会触发视图更新

//如果想让provide的数据响应,那么就要传递引用数据类型

export default {
    //基本写法,这里面的this指向的不是组件实例,而是window
    // provide:{
    //   m:'一块饼'
    // },
    //第二种写法,这种写法可以传递组件实例中的data props computed methods等数据
    provide() {
        // console.log(this.msg)
        return {
            obj: this.obj
        }
    },
    data() {
        return {
            msg: 'app',
            com: "dynamic",
            obj: {
                m: 'app中obj中的m初始值'
            }
        }
    },
    components: {
        slotCom,
        showModalCom,
        mixinsCom,
        dynamic,
        commonApi,
        transitionCom,
        marked
    }
}
</script>